import { ref } from 'vue'

export function useChartConfig() {
  // 配速图表配置
  const createPaceChartOption = ({ paceData, cadenceData, powerData, timeLabels }) => ({
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: { data: ['配速', '步频', '功率'], textStyle: { color: '#ccc' } },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: timeLabels, axisLine: { lineStyle: { color: '#666' } } },
    yAxis: [
      { type: 'value', name: '配速', axisLine: { lineStyle: { color: '#409EFF' } } },
      { type: 'value', name: '步频', position: 'right', axisLine: { lineStyle: { color: '#52c41a' } } },
      { type: 'value', name: '功率', position: 'right', offset: 60, axisLine: { lineStyle: { color: '#faad14' } } }
    ],
    series: [
      { name: '配速', type: 'line', data: paceData, lineStyle: { color: '#409EFF' } },
      { name: '步频', type: 'line', data: cadenceData, yAxisIndex: 1, lineStyle: { color: '#52c41a' } },
      { name: '功率', type: 'line', data: powerData, yAxisIndex: 2, lineStyle: { color: '#faad14' } }
    ]
  })

  // 心率图表配置
  const createHrChartOption = ({ hrData, timeLabels, maxHr }) => ({
    tooltip: { trigger: 'axis' },
    legend: { data: ['心率'], textStyle: { color: '#ccc' } },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: timeLabels, axisLine: { lineStyle: { color: '#666' } } },
    yAxis: {
      type: 'value',
      name: '心率(bpm)',
      min: 60,
      max: maxHr ? Math.min(maxHr + 20, 200) : 200,
      axisLine: { lineStyle: { color: '#f5222d' } },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(255,255,255,0.05)', 'rgba(255,255,255,0)']
        }
      }
    },
    series: [
      {
        name: '心率',
        type: 'line',
        data: hrData,
        lineStyle: { color: '#f5222d' },
        itemStyle: { color: '#f5222d' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(245, 34, 45, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(245, 34, 45, 0)'
            }]
          }
        }
      }
    ]
  })

  return { createPaceChartOption, createHrChartOption }
}